<template>
	<view>
		<navigator url='' class='dataBox'>
			<view>头像</view>
			<view class='more head'>
				<image :src='head'></image>
				<image src='../../static/more2.png'></image>
			</view>
		</navigator>
		<navigator url='' class='dataBox topLine2'>
			<view>昵称</view>
			<view class='more head'>
				<view>{{nickname}}</view>
				<image src='../../static/more2.png'></image>
			</view>
		</navigator>

		<navigator url='' class='dataBox mt_20'>
			<view>姓名</view>
			<view class='more head'>
				<view>{{name}}</view>
				<image src='../../static/more2.png'></image>
			</view>
		</navigator>
		<navigator url='' class='dataBox topLine2'>
			<view>手机号</view>
			<view class='more head'>
				<view>{{phone}}</view>
				<image src='../../static/more2.png'></image>
			</view>
		</navigator>
		<navigator url='' class='dataBox topLine2'>
			<view>修改密码</view>
			<view class='more head'>
				<image src='../../static/more2.png'></image>
			</view>
		</navigator>

		<navigator url='' class='dataBox mt_20'>
			<view>生日</view>
			<view class='more head'>
				<view>{{birthday}}</view>
				<image src='../../static/more2.png'></image>
			</view>
		</navigator>
		<navigator url='' class='dataBox topLine2'>
			<view>性别</view>
			<view class='more head'>
				<view>{{sex}}</view>
				<image src='../../static/more2.png'></image>
			</view>
		</navigator>
		<navigator url='' class='dataBox topLine2'>
			<view>邮箱</view>
			<view class='more head'>
				<view>{{email}}</view>
				<image src='../../static/more2.png'></image>
			</view>
		</navigator>

		<view class='p_30'>
			<navigator url='' class='payBtn'>退出登录</navigator>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				head: '../../static/Candy2x.png',
				nickname: 'Candy',
				name: 'Candy',
				phone: '155****0123',
				birthday: '1999-01-01',
				sex: '女',
				email: '155****0123'
			}
		},
		methods: {

		}
	}
</script>

<style>
	.dataBox {
		padding: 30rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
	}

	.more image:first-child {
		width: 140rpx;
		height: 140rpx;
	}

	.more image:last-child {
		width: 22rpx;
		height: 22rpx;
		vertical-align: middle;
		margin-left: 20rpx;
	}

	.head {
		display: flex;
		align-items: center;
		color: #8B8B8B;
	}

	.payBtn {
		background-color: #2E90FF;
		color: #fff;
		margin-top: 100rpx;
		font-size: 36rpx;
		text-align: center;
		line-height: 2.55555556;
		border-radius: 5px;
	}
</style>
